<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{list.length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected: active === 0}" @click="changeType(0)" href="javascript:;" >全部</a>
      </li>
      <li>
        <a :class="{selected: active === 1}" @click="changeType(1)" href="javascript:;">未完成</a>
      </li>
      <li>
        <a :class="{selected: active === 2}" @click="changeType(2)" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clear">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ['list'],
  data () {
    return {
      active: 0,
      arr: []
    }
  },
  created () {
    this.list.forEach(el => this.arr.push(el))
  },
  methods: {
    changeType (type) {
      this.active = type
      if (type === 0) {
        this.list.forEach((el, i) => this.list.splice(i, 1))
        this.arr.forEach((el, i) => (this.list[i] = el))
      }
      if (type === 1) {
        this.list.forEach((el, i) => this.list.splice(i, 1))
        this.arr.filter(el => !el.isDone).forEach((el, i) => (this.list[i] = el))
      }
      if (type === 2) {
        this.list.forEach((el, i) => this.list.splice(i, 1))
        this.arr.filter(el => el.isDone).forEach((el, i) => (this.list[i] = el))
      }
      // this.$emit('changeType', type)
    },
    clear () {
      this.list.forEach((el, i) => el.isDone && this.list.splice(i, 1))
    }
  }
}
</script>
